<template>
  <router-view v-slot="{ Component }">
    <transition name="slide-fade">
      <!-- 缓存路由 -->
      <keep-alive>
        <component class="child-view" :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
</template>

<style lang="less" scoped>
#app {
  width: 100%;
  position: relative;
  min-height: 100vh;
}

/*路由动画*/
.child-view {
  position: absolute;
  width: 100%;
  transition: all 0.5s cubic-bezier(0.58, 0.09, 0.33, 0.91);
}

/* 离开 */
.slide-fade-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}

/* 进入 */
.slide-fade-enter-from {
  transform: translateY(20px);
  opacity: 0;
}
</style>
